<template>
	<view class="login-code">
		<view class="login-tel">
			<view class="login-main">
				<view class="login-form">
					<view class="user">
						<text class="user-text">验证码:</text>
						<input type="number" focus="true" v-model="RuleCode" placeholder="请输入验证码">
						<button plain="true" size="mini" :disabled="disabled" @tap='sendCode'>{{numMsg}}</button>
					</view>
				</view>
				<view class="logo-text" @tap="submit">
					完成
				</view>
				<view class="reminder">
					温馨提示:已经向您的手机号发送验证码
				</view>
				<login></login>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from "@/common/api/request.js"
	import {
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				RuleCode: "",
				code: 60,
				numMsg: '',
				disabled: false,
				phone: 0,
				getCode: 0
			}
		},
		onReady() {
			this.numMsg = '重新发送(' + this.code + ')';
			this.sendCode()
		},
		onLoad(e) {
			this.phone = e.phone
		},
		methods: {
			...mapMutations(['login']),
			submit() {
				if (this.getCode == this.RuleCode) {
					$http.request({
						url: "/addUser",
						method: "POST",
						data: {
							phone: this.phone,
							code: this.RuleCode
						},
					}).then((res) => {
						uni.showToast({
							title: res.msg
						})
                        this.login(res.data)
						setTimeout(() => {
							if (res.success) {
								uni.redirectTo({
									url: "/pages/index/index"
								})
							}
						}, 2000)

					}).catch(() => {})
				} else {
					uni.showToast({
						title: "验证码不对",
						icon: "error"
					})
				}
			},
			sendCode() {
				this.disabled = true;
				let timer = setInterval(() => {
					--this.code;
					this.numMsg = '重新发送(' + this.code + ')';
				}, 1000)

				$http.request({
					url: "/code",
					method: "POST",
					data: {
						phone: this.phone
					},
				}).then((res) => {
					this.getCode = res.code
				}).catch(() => {})

				setTimeout(() => {
					clearInterval(timer);
					this.code = 60;
					this.disabled = false;
					this.numMsg = '重新发送';
				}, 60000)
			}

		}
	}
</script>

<style scoped>
	.logo-tel {
		width: 100vw;
		width: 100vh;
		line-height: 80rpx;
	}

	.logo-main {
		padding: 0 20rpx;
	}

	.login-form {
		padding: 30rpx 0;
	}

	.user {
		font-size: 32rpx;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		border-bottom: 2rpx solid #acacac;
	}

	.user-text {
		padding-right: 10rpx;
	}

	.reminder {
		color: #acacac;
		padding: 2rpx 0;
		text-align: center;
	}

	.logo-text {
		margin-bottom: 50rpx;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		background-color: #42B7FB;
		border-radius: 40rpx;
	}
</style>